import React from "react";
import { Link } from "react-router-dom";
import { Card, Typography, Row, Col, Button, List, Tag, Avatar, Space } from "antd";
import { useAuth } from "../../contexts/AuthContext";
import { UserOutlined, AlertOutlined, MedicineBoxOutlined, MessageOutlined, SolutionOutlined, AreaChartOutlined, CalendarOutlined, UserAddOutlined } from "@ant-design/icons";
import { ROUTES } from "../../constants/routes";
import Layout from "../../components/Layout";

const { Title, Paragraph } = Typography;

const quickEntries = [
  { key: 'register', icon: <CalendarOutlined />, label: '预约挂号' },
  { key: 'consult', icon: <MessageOutlined />, label: '在线咨询' },
  { key: 'medical', icon: <MedicineBoxOutlined />, label: '病历查询' },
  { key: 'device', icon: <UserAddOutlined />, label: '设备监控' },
];

const getEntryPath = (key: string): string => {
  switch (key) {
    case 'register':
      return ROUTES.patient.registerAppointment;
    case 'consult':
      return ROUTES.patient.consultList;
    case 'medical':
      return ROUTES.patient.medicalRecordQuery;
    case 'device':
      return ROUTES.patient.deviceMonitoring;
    default:
      return ROUTES.patient.dashboard;
  }
};

// Mock data
const reminders = [
  { id: 1, name: "降压药A", time: "08:00", status: "待服用" },
  { id: 2, name: "维生素B", time: "12:00", status: "已服用" },
  { id: 3, name: "阿司匹林", time: "20:00", status: "待服用" }
];

const appointments = [
  { id: 1, department: "骨科", doctor: "王医生", date: "2024-05-18 10:00", status: "已预约" },
  { id: 2, department: "康复科", doctor: "李医生", date: "2024-05-25 14:30", status: "候补中" }
];

const PatientDashboard: React.FC = () => {
  const { user } = useAuth();
  return (
    <Layout title="患者仪表盘" showBackButton={false}>
      <div className="patient-dashboard-container">
        <div className="page-header">
          <h1 className="page-title">患者仪表盘</h1>
        </div>
      
      <Row gutter={[16, 16]}>
        {/* 个人信息卡片 */}
        <Col xs={24} sm={24} md={8} lg={6}>
          <Card className="apple-card patient-info-card">
            <Space direction="vertical" align="center" style={{ width: '100%' }}>
              <Avatar size={80} className="patient-avatar" icon={<UserOutlined />} />
              <Title level={4} className="patient-name">{user?.name || "患者姓名"}</Title>
              <Paragraph style={{ marginBottom: 0, color: '#8e8e93' }}>
                患者ID：{user?.id || "--"}
              </Paragraph>
              <Paragraph style={{ marginBottom: 0, color: '#8e8e93' }}>
                角色：患者
              </Paragraph>
            </Space>
          </Card>
        </Col>
        {/* 快速入口、用药提醒 */}
        <Col xs={24} sm={24} md={16} lg={18}>
          <Row gutter={[16, 16]}>
            {/* 快速入口 */}
            <Col xs={24} md={12}>
              <Card title="快速入口" className="apple-card quick-access-card">
                <div className="quick-access-grid">
                  {quickEntries.map(entry => (
                    <Link key={entry.key} to={getEntryPath(entry.key)} className="quick-access-item">
                      <Button
                        icon={entry.icon}
                        size="large"
                        className="apple-button-secondary quick-access-button"
                      >
                        {entry.label}
                      </Button>
                    </Link>
                  ))}
                </div>
              </Card>
            </Col>
            {/* 用药提醒 */}
            <Col xs={24} md={12}>
              <Card title="用药提醒" extra={<AlertOutlined />} className="apple-card medicine-reminder-card">
                <List
                  itemLayout="horizontal"
                  dataSource={reminders}
                  split
                  className="medicine-reminder-list"
                  renderItem={item => (
                    <List.Item className="reminder-item">
                      <List.Item.Meta
                        title={<span className="medicine-name">{item.name}</span>}
                        description={<span className="medicine-time">时间：{item.time}</span>}
                      />
                      <Tag 
                        color={ item.status === '已服用' ? '#34c759' : '#ff9500' } 
                        className="status-tag"
                      >
                        {item.status}
                      </Tag>
                    </List.Item>
                  )}
                />
              </Card>
            </Col>
          </Row>
        </Col>
        {/* 最近预约状态 */}
        <Col xs={24}>
          <Card title="最近预约" className="apple-card appointments-card">
            <List
              itemLayout="horizontal"
              dataSource={appointments}
              className="appointments-list"
              renderItem={item => (
                <List.Item className="appointment-item">
                  <List.Item.Meta
                    avatar={<Avatar style={{ backgroundColor: '#007aff' }} icon={<SolutionOutlined />} />}
                    title={<span className="appointment-title">科室：{item.department} - 医生：{item.doctor}</span>}
                    description={<span className="appointment-date">时间：{item.date}</span>}
                  />
                  <Tag 
                    color={item.status === '已预约' ? '#007aff' : '#8e8e93'} 
                    className="appointment-status-tag"
                  >
                    {item.status}
                  </Tag>
                </List.Item>
              )}
            />
          </Card>
        </Col>
      </Row>
    </div>
    </Layout>
  );
};

export default PatientDashboard;


